<template>
  <div class="com-item-box" :class="{'error':error}">
    <div class="com-item-wrap">
      <div class="com-item-label" v-if="label"><code v-if="required">*</code>{{label}}</div>
      <template v-if="!error">
        <div class="com-item-tip" v-if="tip">{{tip}}</div>
        <div class="com-item-subtip" v-if="subtip">{{subtip}}</div>
      </template>
      <div class="com-item-error" v-else>{{errmsg}}</div>
      <div class="com-item-main">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
// 完善资料页面表单item组建
export default {
  name:'complete-item',
  props:{
    required:{
      default:false,
    },
    tip:{
      type:String,
      default:'',
    },
    subtip:{
      type:String,
      default:'',
    },
    error:{
      type:Boolean,
      default:false,
    },
    errmsg:{
      type:String,
      default:'请完善信息'
    },
    label:{
      type:String,
      default:'',
    }
  },
}
</script>
<style lang="less" scoped>
.com-item-box  {
  margin-bottom:40px;
  position:relative;
  padding-top:21px;
  background-color:#fff;
  overflow: hidden;
  &.error {
    .com-item-wrap {
      border-color:@color-danger;
    }
  }
  .com-item-wrap {
    border-radius: 8px;
    border:1px solid #e2e2e4;/*no*/
    .com-item-label {
      position:absolute;
      left:20px;
      top:0;
      padding:0 10px;
      background-color: #fff;
      font-size:28px;
      color:#666;
      code {
        font-size:30px;
        color:#f05521;
        font-style: normal;
      }
    }
    .com-item-subtip,
    .com-item-tip,
    .com-item-main {
      position: relative;
      z-index: 1;
    }
    .com-item-subtip,
    .com-item-error,
    .com-item-tip {
      padding:34px 30px 0;
      font-size:24px;
      line-height: 1.2;
      &.com-item-subtip {
        color:#999;
      }
      &.com-item-tip {
        color:#d39b00;
      }
      &.com-item-error {
        color:@color-danger;
      }
    }
    .com-item-main{
      padding:34px 30px;
    }
  }
}
</style>
